<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	
	</head>
	<body>
		
		<div>
			DOM 基础
		</div>
		
		
		<div >
			
			<span  id="first" class="span"> span1</span>
			<span class="span"> span2</span>
			<span class="span">span3</span>
			
		</div>
		
		<input value="用户名" name="username" />
		
		<script>
			
			// 使用 document 对象提供的方法 找到 标签对象 ，然后设置标签的背景颜色 style.backGroundColor = "red"
			
			//通过 id 属性，把第一个span标签设置为红色
			
			var firstSpan = document.getElementById("first");
			
			firstSpan.style.backgroundColor = "red"
			
			
			//通过 标签名称 
			var secondSpan = document.getElementsByTagName('span'); // 多个span标签的类数组
			console.log(secondSpan)
			secondSpan[1].style.backgroundColor = "red"
			
			
			// 通过class 属性 
			var thirdSpan = document.getElementsByClassName('span'); // 多个span标签的类数组
			console.log(thirdSpan)
			thirdSpan[2].style.backgroundColor = "red"
			
			
			
			//通过 name属性 ,多用于form 表单元素
			
			var input = document.getElementsByName('username'); // 有可能是多个
			console.log(input)
			input[0].style.backgroundColor = "red"
			
			
			// 使用 querySelector 和querySelectorAll ，通过CSS 选择器的形式
			
			var span = document.querySelector(".span"); //.代表的是class的性，只能获取第一个span
			
			console.log(span)
			span.style.backgroundColor = "blue"
			
			var spans = document.querySelectorAll(".span");
			
			spans[2].style.backgroundColor = "blue"
			
			
			
			
			
			
			
		
		</script>
		
		
	</body>
</html>